<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<z-tabs :list="tabList" @change="tabChange" />
			</template>


			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="con_box" v-for="(item,index) in dataList" :key="item.id" @click="itemClick(item)">
				<view class="photo">
					<image class="phontoImage" :src="item.image" mode=""></image>
				</view>

				<view class="text_con">
					<view class="title">
						{{item.title}}
					</view>
					<view class="addtime">
						{{item.add_time}}
					</view>
					<view class="desc">
						{{item.desc}}
					</view>
				</view>
			</view>

		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '语文',
				}, {
					name: '数学',
				}, {
					name: '英语'
				}, {
					name: '其他'
				}],

				dataList: []
			}
		},
		created() {
			console.log(this.dataList)
		},
		methods: {
			tabChange(item) {
				// console.log('item', item)
				this.$refs.paging.reload(item)
			},
			itemClick(item) {
				console.log(item)
				var id=item.id
				uni.navigateTo({
				  url: '/pages/courseDetail/courseDetail?id='+id
				});
			},
			queryList(pageNo, pageSize) {
				console.log(pageNo)
				console.log(pageSize)
				for(var i=0;i<5;i++){
					this.dataList.push({
						id:i,
						image: '/static/avatar/touxiang1.jpg',
						title: '测试',
						desc: '描述测试描述测试描述测试描述测试',
						add_time: '2023-12-11'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.con_box {
		display: flex;
		flex-direction: nowarp;
		height: 200rpx;
		margin: 20rpx;
		border-bottom: 1rpx solid #efefef;
	}

	.photo {
		width: 140rpx;
		height: 150rpx
	}

	.phontoImage {
		width: 140rpx;
		height: 150rpx
	}

	.text_con {
		flex: 1;
		margin-left: 30rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
		}

		.addtime {
			color: #e3e3e3;
			line-height: 60rpx;
		}

		.desc {
			color: #e9e9e9;
			overflow: hidden;
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			display: -webkit-box;
			/** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical;
			/** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp: 2;
			/** 显示的行数 **/
		}
	}
</style>